{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Introduction\n",
    "\n",
    "The Juptyer architecture allows you to send messages for code execution to a kernel not only by typing code, but also by using interactive graphical controls such as sliders, menus, check-boxes and more.  These can be used with minimal effort to provide easy interactive exploration of parameters in many common cases. With some additional work, sophisticated, multi-control interfaces can be built."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's first define a simple function that prints the square of its inputs:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "def f(x):\n",
    "    print(x * x)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "81\n"
     ]
    }
   ],
   "source": [
    "f(9)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can explore the behavior of $f(x)$ for $x$ in $[0,100)$ using `interact` from `ipywidgets`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import interact, FloatSlider, FloatText, link, VBox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "442be26da27142d0892b54cc7be1b057",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(IntSlider(value=50, description='x'), Output()), _dom_classes=('widget-interact',))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "interact(f, x=(0, 100));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Interactive Jupyter widgets\n",
    "\n",
    "A Python widget is an object that represents a control on the front end, like a slider. A single control can be displayed multiple times - they all represent the same python object."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "87bf8f8a8e2542f9ac3246b45bc03836",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FloatSlider(value=7.5, description='$\\\\phi$', max=10.0, min=5.0)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "slider = FloatSlider(\n",
    "    value=7.5,\n",
    "    min=5.0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='$\\phi$',\n",
    ")\n",
    "\n",
    "slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "87bf8f8a8e2542f9ac3246b45bc03836",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FloatSlider(value=7.5, description='$\\\\phi$', max=10.0, min=5.0)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "slider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The control attributes, like its value, are automatically synced between the frontend and the kernel."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "7.5"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "slider.value"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "slider.value = 8"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can trigger actions in the kernel when a control value changes by \"observing\" the value. Here we set a global variable when the slider value changes."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "square = slider.value * slider.value\n",
    "def handle_change(change):\n",
    "    global square\n",
    "    square = change.new * change.new\n",
    "slider.observe(handle_change, 'value')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "64.0"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "square"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can link control attributes and lay them out together."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "15e84fe99e924302b7ed9942a79594d3",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(FloatSlider(value=8.0, description='$\\\\phi$', max=10.0, min=5.0), FloatText(value=8.0, descript…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "text = FloatText(description='Value')\n",
    "link((slider, 'value'), (text, 'value'))\n",
    "VBox([slider, text])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Jupyter widgets as a framework\n",
    "\n",
    "Jupyter widgets forms a framework for representing python objects interactively. Some large open-source interactive controls based on Jupyter widgets include:\n",
    "\n",
    " - [bqplot](https://github.com/bloomberg/bqplot) - 2d plotting library\n",
    " - [pythreejs](https://github.com/jupyter-widgets/pythreejs) - low-level 3d graphics library\n",
    " - [ipyvolume](https://github.com/maartenbreddels/ipyvolume) - high-level 3d graphics library\n",
    " - [ipyleaflet](https://github.com/jupyter-widgets/ipyleaflet) - maps"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  },
  "widgets": {
   "state": {
    "0cb2d81d826b4e25aba3b1d39711ef3f": {
     "views": [
      {
       "cell_index": 6
      }
     ]
    },
    "2cfe6521f9834ca69e54518716104cd2": {
     "views": [
      {
       "cell_index": 8
      },
      {
       "cell_index": 9
      },
      {
       "cell_index": 12
      }
     ]
    },
    "889356d59ac543a49da33d134d791c3f": {
     "views": [
      {
       "cell_index": 11
      }
     ]
    }
   },
   "version": "2.0.0-dev"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
